<template>
  <div class="details_box_his">
    <div class="tab_search">
      <el-table
        :row-class-name="tableRowClassName"
        :data="result"
        style="width: 100%; margin-right: 20px"
        height="100px"
        v-adaptive
        :header-cell-class-name="headerRowStyle"
      >
        <el-table-column prop="date" label="序号" type="index" width="45">
        </el-table-column>
        <el-table-column prop="data1" label="设备类型" width="110">
        </el-table-column>
        <el-table-column prop="data2" label="设备编号" width="70">
        </el-table-column>
        <el-table-column prop="data3" label="炉批号" width="70">
        </el-table-column>
        <el-table-column prop="data4" label="报警开始时间"> </el-table-column>
        <el-table-column prop="data5" label="报警点位"> </el-table-column>
        <el-table-column prop="data6" label="报警描述"> </el-table-column>
        <el-table-column prop="data7" label="报警确认时间">
          <template slot-scope="scope">
            <div v-if="scope.row.data8">
              <el-button
                type="primary"
                size="small"
                @click="handleSub(scope.row)"
                >确认</el-button
              >
            </div>
            <div v-else>
              {{ scope.row.data7 }}
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div v-init-screen-h="50" class="exh_box">
        <Echarts style="height: 50%; width: 100%"></Echarts>
        <Echarts1 style="height: 50%; width: 100%"></Echarts1>
      </div>
      <transition name="el-fade-in-linear">
        <div v-if="show" class="search_box" v-init-screen-h>
          <div class="title">筛选</div>
          <el-form
            v-init-screen-h="160"
            size="small"
            label-position="top"
            label-width="80px"
            :model="form"
          >
            <el-form-item label="设备类型" prop="equipmentNumber">
              <el-select
                :popper-append-to-body="false"
                class="w100"
                v-model="form.data1"
                value-key=""
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option label="立式真空气锌炉" value="立式真空气锌炉">
                </el-option>
                <el-option label="卧式真空炉" value="卧式真空炉"> </el-option>
                <el-option label="箱式电炉" value="箱式电炉"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="设备编号" prop="equipmentNumber">
              <el-select
                :popper-append-to-body="false"
                class="w100"
                v-model="form.data2"
                value-key=""
                placeholder="请选择"
                clearable
                filterable
              >
                <el-option label="59" value="59"> </el-option>
                <el-option label="33" value="33"> </el-option>
                <el-option label="30" value="30"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="批炉号" prop="data3">
              <el-input
                v-model="form.name"
                placeholder=""
                size="small"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="btns">
            <el-button style="width: 50%" size="small" @click="handleClick1"
              >重 置</el-button
            >
            <el-button
              style="width: 50%"
              size="small"
              type="primary"
              @click="handleClick"
              >提 交</el-button
            >
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { getClientHeight } from "@/utils/index";
import Echarts from "./echarts.vue";
import Echarts1 from "./echarts1.vue";
import { mapGetters } from "vuex";
export default {
  components: {
    Echarts,
    Echarts1,
  },
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  computed: {
    ...mapGetters(["warningList"]),
  },
  data() {
    return {
      form: {
        data1: "",
        data2: "",
        data3: "",
      },
      currentPage4: 4,
      setHeight: 300,
      formLabelAlign: {
        sparParts: "",
        workingNumber: "",
        radio: 0,
        name: "",
        working: "",
        equipmentNumber: "",
        operator: "",
      },
      rules: {},

      result: [],
    };
  },
  // watch: {
  //   // 监听对象变化
  //   form: {
  //     // handler(val, oldVal) {
  //     //   console.log(this.warningList, " this.warningList");
  //     //   if (val) {
  //     //     // 如果筛选条件全为空，查全部；否则按条件筛选
  //     //     var objIsEmpty =
  //     //       this.form.data1 == "" &&
  //     //       this.form.data2 == "" &&
  //     //       this.form.data3 == "";
  //     //     if (objIsEmpty) {
  //     //       this.result = this.warningList;
  //     //     } else {
  //     //       // /拿到有值的参数
  //     //       let tempFilter = {};
  //     //       for (var key in this.form) {
  //     //         if (
  //     //           typeof this.form[key] != "undefined" &&
  //     //           typeof this.form[key] != "null" &&
  //     //           this.form[key] != null &&
  //     //           this.form[key] != ""
  //     //         ) {
  //     //           tempFilter[key] = this.form[key];
  //     //         }
  //     //       }
  //     //       // console.log(tempFilter,'输出tempFilter')
  //     //       this.result = this.warningList.filter(
  //     //         //筛选
  //     //         (item) => {
  //     //           let flag = false;
  //     //           for (key in tempFilter) {
  //     //             console.log(key, "输出key");
  //     //             if (
  //     //               item[key].toString().indexOf(tempFilter[key].toString()) >=
  //     //               0
  //     //             ) {
  //     //               flag = true;
  //     //             } else {
  //     //               flag = false;
  //     //               break;
  //     //             }
  //     //           }
  //     //           if (flag) {
  //     //             return item;
  //     //           }
  //     //         }
  //     //       );
  //     //       console.log(this.result, "输出筛选结果");
  //     //     }
  //     //   }
  //     // },
  //     deep: true,
  //     immediate: true,
  //   },
  // },
  mounted() {
    this.handlerSerch();
  },
  methods: {
    handlerSerch(val, oldVal) {
      console.log(this.warningList, " this.warningList");
      if (this.form) {
        // 如果筛选条件全为空，查全部；否则按条件筛选
        var objIsEmpty =
          this.form.data1 == "" &&
          this.form.data2 == "" &&
          this.form.data3 == "";
        if (objIsEmpty) {
          this.result = this.warningList;
        } else {
          // /拿到有值的参数
          let tempFilter = {};
          for (var key in this.form) {
            if (
              typeof this.form[key] != "undefined" &&
              typeof this.form[key] != "null" &&
              this.form[key] != null &&
              this.form[key] != ""
            ) {
              tempFilter[key] = this.form[key];
            }
          }
          // console.log(tempFilter,'输出tempFilter')
          this.result = this.warningList.filter(
            //筛选
            (item) => {
              let flag = false;
              for (key in tempFilter) {
                console.log(key, "输出key");
                if (
                  item[key].toString().indexOf(tempFilter[key].toString()) >= 0
                ) {
                  flag = true;
                } else {
                  flag = false;
                  break;
                }
              }
              if (flag) {
                return item;
              }
            }
          );
          console.log(this.result, "输出筛选结果");
        }
      }
    },
    handleSub(row) {
      this.$msg({
        message: "确认成功",
        type: "success",
      });
      row.data8 = false;
    },
    handleClick1() {
      this.$emit("update:show", false);
      // this.$emit("handleReste");
      for (const key in this.form) {
        this.form[key] = "";
      }
      this.handlerSerch();
    },
    handleClick() {
      this.handlerSerch();
      this.$emit("update:show", false);
    },
    handNavTo(row) {
      this.$router.push({
        name: "historyDataDetails",
        query: { num: row.num },
      });
    },
    headerRowStyle() {
      return "success-row";
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row, "row");
      if (row.data8) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.exh_box {
  display: flex;
  flex-direction: column;
  width: 36%;
}
.details_box_his {
  height: auto !important;
  /* background-color: #010b48; */
  .search_box {
    /* height: 100%; */
    width: 20%;
    color: #fff;
    border: 1px solid #0da9f2;
    padding: 10px;
    margin-left: 10px;
    overflow: auto;
    position: relative;
    .btns {
      /* position: absolute;
        bottom: 0;
        left: 0; */
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-top: 6px;
      padding: 20px;
      padding-bottom: 10px;
    }
    .dis_row {
      /deep/ .el-form-item {
        display: flex;
        align-items: center;
        .el-form-item__content {
          white-space: nowrap;
          margin-left: 10px;
          .el-radio {
            margin-right: 6px !important;
            color: #fff;
          }
        }
        .el-form-item__label {
          white-space: nowrap;
        }
      }
    }
    /deep/ .el-form {
      .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: 100%;
        color: #fff;
      }
      .el-popper[x-placement^="bottom"] .popper__arrow {
        border-bottom-color: #081f63;
      }
      .el-select-dropdown__item.hover,
      .el-select-dropdown__item:hover {
        background-color: #0da9f2;
      }
      .el-select-dropdown {
        background-color: #081f63;
        /* color: #fff !important; */
        border: 1px solid #0da9f2;
        span {
          color: #fff;
        }
      }
      .el-form-item {
        margin-bottom: 6px;
        .el-input__inner {
          background: rgba(1, 11, 71, 0.74);
          border: 1px solid #0da9f2;
          color: #fff;
        }
      }
      .el-form-item__label {
        padding: 0;
        color: #fff;
      }
    }
    .title {
      /* margin-bottom: 10px; */
    }
  }
  .dis_center {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .tab_search {
    margin-top: 20px;
    display: flex;
    align-items: flex-start;
    width: 100%;
    .num {
      cursor: pointer;
    }
    .dis_item {
      display: flex;
      align-items: center;
      /deep/ .el-date-editor.el-input,
      .el-date-editor.el-input__inner {
        width: auto;
      }
    }
    .search_box::-webkit-scrollbar {
      width: 6px;
      height: 6px;
    }
    .search_box::-webkit-scrollbar-track {
      background-color: inherit;
      -webkit-border-radius: 0;
      -moz-border-radius: 0;
      border-radius: 0;
    }
    .search_box::-webkit-scrollbar-thumb {
      background-color: #5dcbff;
      -webkit-border-radius: 2em;
      -moz-border-radius: 2em;
      border-radius: 2em;
    }
    /* ::-webkit-scrollbar {
    width: 12px !important;
    height: 12px;
  } */
    .search_box::-webkit-scrollbar-corner {
      /* background-color: #5dcbff; */
      display: none;
    }
    .search_box {
      /* height: 100%; */
      width: 20%;
      color: #fff;
      border: 1px solid #0da9f2;
      padding: 10px;
      margin-left: 10px;
      overflow: auto;
      position: relative;
      .btns {
        /* position: absolute;
        bottom: 0;
        left: 0; */
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-top: 6px;
        padding: 20px;
        padding-bottom: 10px;
      }
      .dis_row {
        /deep/ .el-form-item {
          display: flex;
          align-items: center;
          .el-form-item__content {
            white-space: nowrap;
            margin-left: 10px;
            .el-radio {
              margin-right: 6px !important;
              color: #fff;
            }
          }
          .el-form-item__label {
            white-space: nowrap;
          }
        }
      }
      /deep/ .el-form {
        .el-date-editor.el-input,
        .el-date-editor.el-input__inner {
          width: 100%;
        }
        .el-popper[x-placement^="bottom"] .popper__arrow {
          border-bottom-color: #081f63;
        }
        .el-select-dropdown__item.hover,
        .el-select-dropdown__item:hover {
          background-color: #0da9f2;
        }
        .el-select-dropdown {
          background-color: #081f63;
          /* color: #fff !important; */
          border: 1px solid #0da9f2;
          span {
            color: #fff;
          }
        }
        .el-form-item {
          margin-bottom: 6px;
          .el-input__inner {
            background: rgba(1, 11, 71, 0.74);
            border: 1px solid #0da9f2;
          }
        }
        .el-form-item__label {
          padding: 0;
          color: #fff;
        }
      }
      .title {
        /* margin-bottom: 10px; */
      }
    }
  }
  .my_pag {
    text-align: center;
    margin-top: 10px;
    color: #fff;
    /deep/ .el-pagination button {
      background-color: inherit;
      .el-icon {
        color: #fff;
      }
    }
    /deep/ .el-pager {
      background-color: inherit;
      li {
        background-color: inherit;
        color: #fff;
      }
    }
    /deep/ .el-pagination__jump {
      color: #fff;
    }
    /deep/ .el-input__inner {
      background-color: #010b47;
      color: #fff;
      border: 1px solid #0da9f2;
    }
    /deep/ .el-pagination__total {
      color: #fff;
    }
  }
  /deep/ .gutter {
    display: none;
  }

  padding: 20px;
  margin-top: -30px;
  height: 100%;
  /deep/ .el-table {
    background-color: #093085 !important;
    border: 1px solid #0da9f2;
    .el-table__row:hover > td {
      background-color: inherit !important;
    }
    td,
    th.is-leaf {
      border-bottom: 0 !important;
    }
    .el-table__row--striped:hover > td {
      background-color: inherit;
    }
    .warning-row {
      background: #ff0062 !important;
      color: #fff;
    }
    .success-row {
      background: #002675;
      color: #fff;
    }
  }
}
</style>